<template>
  <div class="GreetingCard1">
    <div class="part-bg">
      <img class="part-bg1" v-if="demo === '2'" src="./img/bg.png" alt="" />
      <img class="part-bg1" v-if="demo === '1'" src="./img/bg1.png" alt="" />
      <img class="part-bg2" v-if="demo === '1'" src="./img/bg2.png" alt="" />
      <div class="part2" @click="popBox1Btn">
        <span class="part21">规则</span>
      </div>
    </div>
    <div class="part1" :style="inputDoorCss">
      <div class="part11">
        <div class="part111">
          <input v-model="ddForm.phone" class="part111-i" @focus="inputOffset(1)" @blur="inputOffset(0)" type="text" placeholder="请输入口令/兑换码" />
        </div>
        <div class="part111">
          <input v-model="ddForm.code" class="part111-i" @focus="inputOffset(1)" @blur="inputOffset(0)" type="text" placeholder="请输入数字验证码" :maxlength="4" :disabled="!msgCodeImg" />
          <div class="part111-img" @click="sendCodeImg">
            <img width="100%" v-if="msgCodeImg" :src="msgCodeImg" alt="" />
            <u-loading-icon v-else size="25"></u-loading-icon>
          </div>
        </div>
        <div class="part112" @click="sendBtn">
          <u-loading-icon color="#fff" size="25" v-if="loading1"></u-loading-icon>
          <span class="part112-btn">立即领取</span>
        </div>
      </div>
    </div>

    <popMsg ref="popMsg" @alertOff="alertOff"></popMsg>
  </div>
</template>

<script>
import popMsg from '../../component/dialog/index1.vue'
import $utils from '../../utils'

export default {
  props: {
    demo: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      loading1: false,
      ddForm: {},
      inputDoor: 0,
      inputDoorCss: '',
      inputDoorNum: 0,
      msgCodeImg: '',
      timer1: null,
      timer2: null,
    }
  },
  components: {
    popMsg,
  },
  mounted() {
    if (this.demo === '1') {
      this.sendCodeImg()
    }
    this.inputDoorNum = window.innerHeight
  },
  methods: {
    popUpMsg(i, j) {
      this.$refs.popMsg.popUpMsg(i, j)
    },
    alertOff(i) {
      if (i === 6) {
        this.$parent.pageSwichBtn(1)
      }
    },
    sendBtn() {
      if (!this.ddForm.phone) {
        uni.showToast({
          icon: 'error',
          title: '请输入口令/兑换码',
        })
        return
      }
      if (!this.ddForm.code) {
        uni.showToast({
          icon: 'error',
          title: '请输入验证码',
        })
        return
      }
      if (this.ddForm.code.length !== 4) {
        uni.showToast({
          icon: 'error',
          title: '验证码格式错误',
        })
        return
      }

      if (this.loading1) return
      this.loading1 = true

      this.ddForm.companyId = $utils.urlQuery('companyId') || window.localStorage.companyId
      this.ddForm.openId = localStorage.user
      this.ddForm.secret = this.ddForm.phone.trim()
      this.$api.newhlxmApi
        .getActivityMoney(this.ddForm)
        .then((res) => {
          this.loading1 = false
          let str = `${res.data.money}元立减金`
          if (res.data.sum && res.data.sum > 1) {
            str = str + `x${res.data.sum}`
          }
          this.popUpMsg(6, str)
        })
        .catch((err) => {
          this.loading1 = false
          this.sendCodeImg()
          this.popUpMsg(3, err.msg)
        })
    },
    inputOffset(i) {
      this.inputDoor = i
      this.$parent.tabBarShow = !i
      if (i === 1) {
        if (this.inputDoorNum < 600) {
          this.inputDoorCss = 'position: fixed;top: ' + uni.upx2px(150) + 'px'
        } else if (this.inputDoorNum < 760 && this.inputDoorNum > 600) {
          this.inputDoorCss = 'top: ' + this.inputDoorNum * 0.12 + 'px'
        } else {
          this.inputDoorCss = 'top: ' + this.inputDoorNum * 0.22 + 'px'
        }
      } else {
        this.inputDoorCss = ''
      }

      if (this.timer1) clearTimeout(this.timer1)
      this.timer1 = setTimeout(() => {
        window.scrollTo(0, 0)
      }, 100)
    },
    popBox1Btn() {
      this.popUpMsg(
        1,
        '1、点击领取微信立减金，限工行借记卡消费使用；\n2、本次活动每人限参与一次，立减金数量有限，先到先得；\n3、严禁使用机器刷单、外挂、作弊等手段非法套取活动奖励，一经发现，活动方有权冻结活动订单并追回非法所得；\n4、微信立减金仅限微信商业支付时使用，转账、理财及少数特定商户不可使用立减金抵扣。立减金需使用微信绑定工行借记卡支付时使用，立减金有效期为3天。'
      )
    },
    sendCodeImg() {
      if ($utils.urlQuery('companyId') || window.localStorage.companyId) {
        this.timeCheck1()
      }
    },
    sendCodeImg1() {
      this.ddForm.code = ''
      this.$api.newhlxmApi
        .captchaImage()
        .then((res) => {
          this.msgCodeImg = 'data:image/gif;base64,' + res.img
          this.ddForm.key = res.uuid
        })
        .catch(() => {
          if (this.timer2) clearTimeout(this.timer2)
          this.timer2 = setTimeout(() => {
            this.sendCodeImg1()
          }, 2000)
        })
    },
    timeCheck1() {
      this.$api.newhlxmApi
        .timeCheck({
          id: $utils.urlQuery('companyId') || window.localStorage.companyId,
        })
        .then((res) => {
          let res1 = res.data

          let res11 = this.$moment(res1.startTime, 'MM/DD HH:mm:ss')
          let res12 = this.$moment(res1.finishTime, 'MM/DD HH:mm:ss')
          let res21 = parseInt(this.$moment(res1.startTime, 'YYYYMMDDHHmm'))
          let res22 = parseInt(this.$moment(res1.finishTime, 'YYYYMMDDHHmm'))
          let res23 = parseInt(this.$moment(new Date(), 'YYYYMMDDHHmm'))
          if (res23 > res22 || res23 < res21) {
            this.popUpMsg(4, {
              text: '活动不在时间范围内',
              start: res11,
              end: res12,
            })
          } else {
            this.sendCodeImg1()
          }
        })
        .catch(() => {
          this.$parent.pageLoad(true, '活动不存在')
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.GreetingCard1 {
  position: relative;
  .part-bg {
    font-size: 0;
    width: 100vw;
    height: 1380rpx;
    overflow: hidden;
    .part-bg1 {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .part-bg2 {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 70vh;
      z-index: 1;
    }
  }
  .part1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    transition: all 0.3s;
    top: 758rpx;
    transition: all 0.2s linear;
    .part11 {
      width: 630rpx;
      margin: 0 auto;
      background: #fff;
      border-radius: 16rpx;
      padding: 40rpx 30rpx 50rpx;
      background: rgba(255, 255, 255, 0.7);
      border: 2rpx solid #ffffff;
      backdrop-filter: blur(10px);
      .part111 {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;
        .part111-icon {
          margin-right: 30rpx;
        }
        .part111-i {
          padding: 0 30rpx;
          border-radius: 8rpx;
          border: 2rpx solid rgba(0, 0, 0, 0.3);
          flex: 1;
          height: 90rpx;
          line-height: 90rpx;
          font-size: 28rpx;
        }
        .part111-t {
          color: var(--main-color);
          margin-left: 30rpx;
          font-size: 28rpx;
          line-height: 90rpx;
        }
        .part111-img {
          width: 274rpx;
          height: 90rpx;
          margin-left: 41rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .part112 {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 50rpx;
        height: 100rpx;
        background: var(--main-color);
        border-radius: 8rpx;
        color: #fff;
        font-size: 34rpx;
        line-height: 34rpx;
      }
      .part112-btn {
        margin-left: 20rpx;
      }
    }
  }
  .part2 {
    position: absolute;
    top: 290rpx;
    right: 0;
    z-index: 10;
    width: 120rpx;
    height: 50rpx;
    border: 6rpx solid rgba(255, 255, 255, 0.7);
    border-right: 0;
    z-index: 3;
    background: var(--main-color);
    border-radius: 16rpx 0px 0px 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .part21 {
      color: #fff;
      font-size: 24rpx;
      line-height: 24rpx;
      display: inline-block;
    }
  }
}
</style>
